<template>
  <div class="centers">
    <div id="myUser">
      <el-avatar> user </el-avatar>
    </div>
    <!-- <div style="vertical-align:middle;padding-left: 10px;">
      <el-switch v-model="isCollapse" active-color="#ff4949" inactive-color="#13ce66">
      </el-switch>
    </div> -->
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;width: auto;">
      <el-radio-button id="el-radio-button1" style="width: 50%;padding: 0,0,0,0;" :label="false">展开</el-radio-button>
      <el-radio-button  id="el-radio-button2" style="width: 50%;" :label="true">收起</el-radio-button>
    </el-radio-group>
    <div>
      <el-menu id="myel-menu" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen"
        @close="handleClose" :collapse="isCollapse">
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
          </template>
          <el-menu-item-group>
            <span slot="title">分组一</span>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <span slot="title">选项4</span>
            <el-menu-item index="1-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-chat-line-square"></i>
            <span slot="title">导航一</span>
          </template>
          <el-submenu index="2-4">
            <span slot="title">选项4</span>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="3">
          <i class="el-icon-coin"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-notebook-2"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-pie-chart"></i>
          <span slot="title">导航二</span>
        </el-menu-item>
        <el-menu-item index="8" text-color="#fff">
          <i id="iiii" class="el-icon-setting"></i>
          <span slot="title">导航四</span>
        </el-menu-item>
      </el-menu>
    </div>
    
  </div>
</template>
<script>
  export default {
    name: 'AsideFrame',
    data () {
      return {
        isCollapse: true
      }
    },
    methods: {
      handleOpen (key, keyPath) {
        console.log(key, keyPath)
      },
      handleClose (key, keyPath) {
        console.log(key, keyPath)
      },
      changeRadio () {
        // 监听readio的事件 通知baseFrame 修改AsideFrame的宽度
        // console.log(this.isCollapse)
        // 自定义事件  传递值“子向父组件传值”
        // this.$emit('changeRadio', this.isCollapse)
        // var changeRadioStr = this.isCollapse ? '1' : '2'
        this.$emit('changeRadio', this.isCollapse)
      }
    }
  }
</script>
<style>
  .centers {
    overflow-y: hidden;
    overflow-x: hidden;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  #myel-menu {
    background-color:#545c64;
  }

  #myUser {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 64px;
  }

  #el-radio-button1 span {
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    margin-left: 1px;
    font-size: 12px;
    width: 31px;
    height: 20px;
    display:flex;
    align-items: center;
    justify-content: center;
  }
  #el-radio-button2 span {
    padding-left: 0px;
    padding-top: 0px;
    width: 31px;
    font-size: 12px;
    height: 20px;
    padding-right: 0px;
    padding-bottom: 0px;
    display:flex;
    align-items: center;
    justify-content: center;
  }
  
</style>